<template>
  <div class="app-tip">
    <cube-tip ref="tip" :direction="direction" :style="actualStyle" @click="close">
      <component
        ref="component"
        :is="componentName"
        :viewdata="viewdata"
        @viewdataschange="viewDatasChange"
        @close="close"
        class="view-tip-container"
      ></component>
    </cube-tip>
    <div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Provide, Emit, Watch } from "vue-property-decorator";
import { Subject } from "rxjs";
import { Style,Tip } from 'cube-ui'
@Component({
    components: {
      "cube-tip":Tip
    }
})
export default class AppTip extends Vue {
    /**
     * 输入组件名
     *
     * @type {string}
     * @memberof AppTip
     */
    @Prop() public componentName!: string;

    /**
     * 视图数据
     *
     * @type {any}
     * @memberof AppTip
     */
    @Prop() public viewdata: any;

    /**
     * 目标位置对象
     *
     * @type {any}
     * @memberof AppTip
     */
    @Prop() public target: any;

    /**
     * tip组件的高
     *
     * @type {any}
     * @memberof AppTip
     */
    @Prop({default:250}) public tipHeight?: number;

    /**
     * tip组件的宽
     *
     * @type {any}
     * @memberof AppTip
     */
    @Prop({default:150}) public tipWidth?: number;

    /**
     * 提示框的位置
     *
     * @type {string}
     * @memberof AppTip
     */
    @Prop({default:"left"}) public position?: string;

    /**
     * 自定义样式
     *
     * @type {object}
     * @memberof AppPopup
     */
    @Prop() public CustomStyle?: object;

    /**
     * 三角的位置
     *
     * @type {string}
     * @memberof AppTip
     */
    get direction(): string {
      switch(this.position){
        case "left":
          return "right";
        case "right":
          return "left";
        case "top":
          return "bottom";
        default:
          return "top";
      }
    }

    /**
     * 可观察对象
     *
     * @type {Subject}
     * @memberof AppTip
     */
    public subject = new Subject();

    /**
     * 实际的样式
     *
     * @memberof AppPopup
     */
    get actualStyle():any {
        let rectobj = this.target.getBoundingClientRect();
        let defaultStyle = {};
        let _tipWidth = (this.tipWidth as any);
        let _tipHeight = (this.tipHeight as any);
        switch (this.position) {
        case 'top':
          defaultStyle = {left: rectobj.left+window.scrollX-20+"px", top: rectobj.top+window.scrollY-10-_tipHeight+"px"}
          break
        case 'bottom':
          defaultStyle = {left: rectobj.left+window.scrollX-20+"px", top: rectobj.bottom+window.scrollY+10+"px"}
          break
        case 'left':
          defaultStyle = {left: rectobj.left+window.scrollX-_tipWidth-10+"px", top: rectobj.bottom+window.scrollY-23-_tipHeight/2+"px"}
          break
        case 'right':
          defaultStyle = {left: rectobj.right+window.scrollX+10+"px", top: rectobj.bottom+window.scrollY-21-_tipHeight/2+"px"}
          break
      }
        return Object.assign(defaultStyle,this.CustomStyle,{height: _tipHeight+"px", width: _tipWidth+"px"});
    }
    /**
     * 显示
     *
     * @memberof AppTip
     */
    public show() {
        (this.$refs.tip as any).show();
        return this.subject;
    }

    /**
     * 隐藏
     *
     * @memberof AppTip
     */
    public hide(item?: any) {
        (this.$refs.tip as any).hide();
        this.subject.next(item);
        this.subject.asObservable();
        (this.$el as any).parentElement.removeChild(this.$el);
        this.$destroy();
    }

    /**
     * 视图数据修改
     *
     * @memberof AppTip
     */

    public viewDatasChange($event: any) {
        if (!Object.is($event.action, "load") && !Object.is($event.action, "save")) {
            this.hide($event.data);
        }
    }

    /**
     * 视图关闭
     *
     * @memberof AppTip
     */

    public close(args?: any) {
        args ? this.hide(args.data) : this.hide();
    }
}
</script>
<style lang="less">
.cube-tip{
  max-height: none;
  padding: 10px 10px 10px 10px;
  background: #fff;
  border-radius: 4px;
  color: #323233;
}
.cube-tip-close{
  display: none;
}
.cube-tip-angle::before{
  border-color: transparent transparent #fff;
}
.cube-tip-content{
  overflow: auto;
}
</style>
